import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { View, Modal, Pressable } from 'react-native';
import { Text } from '@/components/ui/text';
import { Icon } from '@/components/ui/icon';
import { X, Minimize2 } from 'lucide-react-native';
import { useColorScheme } from 'nativewind';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import * as Haptics from 'expo-haptics';
import { useKortixComputerStore } from '@/stores/kortix-computer-store';
import { ViewToggle } from './ViewToggle';
import { NavigationControls } from './NavigationControls';
import { ToolsView } from './ToolsView';
import { FileBrowserView } from './FileBrowserView';
import { FileViewerView } from './FileViewerView';
import { BrowserView } from './BrowserView';
import { extractToolCallAndResult } from '@/lib/utils/tool-data-extractor';
import type { UnifiedMessage } from '@/api/types';
import type { ToolMessagePair } from '@/components/chat';

interface KortixComputerProps {
  toolMessages: ToolMessagePair[];
  currentIndex: number;
  onNavigate: (newIndex: number) => void;
  messages?: UnifiedMessage[];
  agentStatus: string;
  project?: {
    id: string;
    name: string;
    sandbox?: {
      id?: string;
      sandbox_url?: string;
      vnc_preview?: string;
      pass?: string;
    };
  };
  isLoading?: boolean;
  agentName?: string;
  onFileClick?: (filePath: string) => void;
  onPromptFill?: (prompt: string) => void;
  streamingText?: string;
  sandboxId?: string;
}

export function KortixComputer({
  toolMessages,
  currentIndex,
  onNavigate,
  messages,
  agentStatus,
  project,
  isLoading = false,
  agentName,
  onFileClick,
  onPromptFill,
  streamingText,
  sandboxId,
}: KortixComputerProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === 'dark';
  const insets = useSafeAreaInsets();

  const {
    isOpen,
    activeView,
    filesSubView,
    selectedFilePath,
    pendingToolNavIndex,
    closePanel,
    setActiveView,
    clearPendingToolNav,
  } = useKortixComputerStore();

  const [internalIndex, setInternalIndex] = useState(currentIndex);
  const [navigationMode, setNavigationMode] = useState<'live' | 'manual'>('live');

  useEffect(() => {
    if (toolMessages.length > 0) {
      const safeIndex = Math.min(currentIndex, Math.max(0, toolMessages.length - 1));
      setInternalIndex(safeIndex);
    }
  }, [currentIndex, toolMessages.length]);

  useEffect(() => {
    if (pendingToolNavIndex !== null && pendingToolNavIndex >= 0 && pendingToolNavIndex < toolMessages.length) {
      setActiveView('tools');
      setInternalIndex(pendingToolNavIndex);
      setNavigationMode(pendingToolNavIndex === toolMessages.length - 1 ? 'live' : 'manual');
      onNavigate(pendingToolNavIndex);
      clearPendingToolNav();
    }
  }, [pendingToolNavIndex, toolMessages.length, setActiveView, onNavigate, clearPendingToolNav]);

  const safeIndex = toolMessages.length > 0 ? Math.min(internalIndex, Math.max(0, toolMessages.length - 1)) : 0;
  const currentPair = toolMessages.length > 0 && safeIndex >= 0 && safeIndex < toolMessages.length
    ? toolMessages[safeIndex]
    : undefined;
  const { toolCall, toolResult, isSuccess, assistantTimestamp, toolTimestamp } = useMemo(() => {
    if (!currentPair?.toolMessage) {
      return { toolCall: null, toolResult: null, isSuccess: false, assistantTimestamp: undefined, toolTimestamp: undefined };
    }
    return extractToolCallAndResult(currentPair.assistantMessage, currentPair.toolMessage);
  }, [currentPair]);

  const isStreaming = toolResult === undefined;
  const totalCalls = toolMessages.length;
  const latestIndex = Math.max(0, totalCalls - 1);
  const safeInternalIndex = toolMessages.length > 0 ? Math.min(internalIndex, Math.max(0, totalCalls - 1)) : 0;

  const navigateToPrevious = useCallback(() => {
    if (safeInternalIndex > 0) {
      setNavigationMode('manual');
      const newIndex = safeInternalIndex - 1;
      setInternalIndex(newIndex);
      onNavigate(newIndex);
    }
  }, [safeInternalIndex, onNavigate]);

  const navigateToNext = useCallback(() => {
    if (safeInternalIndex < latestIndex) {
      const newIndex = safeInternalIndex + 1;
      setNavigationMode(newIndex === latestIndex ? 'live' : 'manual');
      setInternalIndex(newIndex);
      onNavigate(newIndex);
    }
  }, [safeInternalIndex, latestIndex, onNavigate]);

  const jumpToLive = useCallback(() => {
    setNavigationMode('live');
    setInternalIndex(latestIndex);
    onNavigate(latestIndex);
  }, [latestIndex, onNavigate]);

  const jumpToLatest = useCallback(() => {
    setNavigationMode('manual');
    setInternalIndex(latestIndex);
    onNavigate(latestIndex);
  }, [latestIndex, onNavigate]);

  const handleClose = useCallback(() => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    closePanel();
  }, [closePanel]);

  const effectiveSandboxId = sandboxId || project?.sandbox?.id || '';
  const showFilesTab = !!effectiveSandboxId;

  if (!isOpen) {
    return null;
  }

  return (
    <Modal
      visible={isOpen}
      animationType="slide"
      presentationStyle="fullScreen"
      onRequestClose={handleClose}
    >
      <View className="flex-1" style={{ backgroundColor: isDark ? '#121215' : '#ffffff' }}>
        {/* Header */}
        <View
          className="px-4 py-3 border-b flex-row items-center justify-between"
          style={{
            paddingTop: insets.top + 8,
            backgroundColor: isDark ? '#121215' : '#ffffff',
            borderBottomColor: isDark ? 'rgba(248, 248, 248, 0.1)' : 'rgba(18, 18, 21, 0.1)',
          }}
        >
          <View className="flex-row items-center gap-3">
            <Text className="text-lg font-roobert-semibold">
              Kortix Computer
            </Text>
            {isStreaming && activeView === 'tools' && (
              <View className="px-2.5 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/20 flex-row items-center gap-1.5">
                <View className="w-1.5 h-1.5 rounded-full bg-blue-500" />
                <Text className="text-xs font-roobert-medium text-blue-700 dark:text-blue-400">
                  Running
                </Text>
              </View>
            )}
          </View>

          <View className="flex-row items-center gap-2">
            <ViewToggle
              currentView={activeView}
              onViewChange={setActiveView}
              showFilesTab={showFilesTab}
            />
            <Pressable
              onPress={handleClose}
              className="p-2 rounded-lg active:opacity-70"
              style={{
                backgroundColor: isDark ? 'rgba(248, 248, 248, 0.1)' : 'rgba(18, 18, 21, 0.05)',
              }}
            >
              <Icon
                as={X}
                size={20}
                color={isDark ? '#f8f8f8' : '#121215'}
                strokeWidth={2}
              />
            </Pressable>
          </View>
        </View>

        {/* Content */}
        <View className="flex-1">
          {activeView === 'tools' && (
            <ToolsView
              toolCall={toolCall}
              toolResult={toolResult || undefined}
              assistantMessage={currentPair?.assistantMessage}
              toolMessage={currentPair?.toolMessage}
              assistantTimestamp={assistantTimestamp}
              toolTimestamp={toolTimestamp}
              isSuccess={isSuccess}
              isStreaming={isStreaming}
              project={project}
              currentIndex={safeInternalIndex}
              totalCalls={totalCalls}
              onFileClick={onFileClick}
              onPromptFill={onPromptFill}
            />
          )}

          {activeView === 'files' && (
            <>
              {filesSubView === 'viewer' && selectedFilePath ? (
                <FileViewerView
                  sandboxId={effectiveSandboxId}
                  filePath={selectedFilePath}
                  project={project}
                />
              ) : (
                <FileBrowserView
                  sandboxId={effectiveSandboxId}
                  project={project}
                />
              )}
            </>
          )}

          {activeView === 'browser' && (
            <BrowserView sandbox={project?.sandbox} />
          )}
        </View>

        {/* Navigation Controls - Only show for tools view */}
        {activeView === 'tools' && (totalCalls > 1 || (isStreaming && totalCalls > 0)) && (
          <NavigationControls
            displayIndex={safeInternalIndex}
            displayTotalCalls={totalCalls}
            safeInternalIndex={safeInternalIndex}
            latestIndex={latestIndex}
            isLiveMode={navigationMode === 'live'}
            agentStatus={agentStatus}
            onPrevious={navigateToPrevious}
            onNext={navigateToNext}
            onJumpToLive={jumpToLive}
            onJumpToLatest={jumpToLatest}
          />
        )}
      </View>
    </Modal>
  );
}

